<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>支付</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			body {
				background-color: rgb(242,242,242)
			}
			.aui-bar {
				background-color: #6ac82c;
			}
			.money {
				position: relative;
				background-color: #fff;
			}
			.money span {
				position: absolute;
				line-height: 80px;
				left: 40px;
				color: #333;
			}
			.money p {
				font-size: 30px;
				font-weight:bold;
				text-align: center;
				color: #ff4040;
				line-height: 80px;
			}
			.title {
				padding: 20px 10px 5px;
			}
			.title span {
				font-size: 22px;
				color: #6ac82c;
				margin-right: 10px;
				letter-spacing: -1px;
			}
			.list-view {
				padding: 0 15px;
				background-color: #fff;
				border-top: 1px solid #dfdfdf;
				border-bottom: 1px solid #dfdfdf;
			}
			.list-view li {
				height: 55px;
				border-top: 1px solid #dfdfdf;
				position:relative;
			}
			.list-view li:first-child{
				border:none;
			}
			.list-view li .mask{
				position:absolute;
				width: 55px;
				height:55px;
				right: 0;
				top:0;
			}
			.list-view li .aui-pull-left{
			padding-left:20px;
				color:#666;
				line-height: 55px;
			}
			.list-view li .aui-radio {
				margin: 15px 12px;
			}
			.aui-radio:checked {
				background-color: #409ee1;
				border-color: #409ee1;
			}
			#footer{
				width:100%;
                margin-top: 50px;
			}
			.bottom-btn{
				text-align:center;
				line-height: 45px;
				margin: 0 10px;
				background-color:#409ee1;
				color:#fff;
				font-size: 18px;
			}
			.bottom-btn:active{
				background-color:#3B89C4;
			}
		</style>
	</head>
	<body>
    <div id="top-div"></div>
		<header id="header" class="aui-bar aui-bar-nav">
			<a class="aui-pull-left" onclick="back()"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div id="header-title" class="aui-title">
				支付
			</div>
		</header>
		<div class="money">
			<span>请支付</span>
			<p>
				￥199.5
			</p>
		</div>
		<div class="title">
			<span class="aui-iconfont aui-icon-vipcard"></span>请选择支付方式
		</div>
		<ul class="list-view">
			<li>
				<div class="aui-pull-left">
					货到付款
				</div>
				<input class="aui-pull-right aui-radio" type="radio" name="radio" />
				<div class="mask"></div>
			</li>
			<li>
				<div class="aui-pull-left">
					在线支付
				</div>
				<input class="aui-pull-right aui-radio" type="radio" name="radio" />
				<div class="mask"></div>
			</li>
			<li>
				<div class="aui-pull-left">
					公司转账
				</div>
				<input class="aui-pull-right aui-radio" type="radio" name="radio" />
				<div class="mask"></div>
			</li>
			<li>
				<div class="aui-pull-left">
					邮局汇款
				</div>
				<input class="aui-pull-right aui-radio" type="radio" name="radio"/>
				<div class="mask"></div>
			</li>
		</ul>
		<footer id="footer">
			<div class="bottom-btn">确定</div>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
	
		$('.list-view li').click(function(){
		$('.list-view li input').removeAttr('checked');
			$(this).find('input').attr('checked','checked');
		});
        function back(){
            window.location.href = '../html/order_form.html'
        }
	</script>
</html>